/* #backToTopBtn {
   display: none; 
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 520;
   font-size: 24px;
   background: #0000ff;
   color: white;
   cursor: pointer;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
   transform: rotate(-90deg); 
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   transition:
      opacity 0.3s,
      transform 0.3s,
      margin-right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#backToTopBtn:hover {
   background-color: #5a5eff;
   transform: rotate(-90deg) scale(1.1);
} */

/* #backToBottomBtn {
   display: block;
   position: fixed;
   bottom: 0px;
   right: 20px;
   z-index: 520;
   font-size: 24px;
   background: #0000ff;
   color: white;
   cursor: pointer;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
   transform: rotate(90deg);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   transition:
      opacity 0.3s,
      transform 0.3s,
      margin-right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#backToBottomBtn:hover {
   background-color: #5a5eff;
   transform: rotate(90deg) scale(1.1);
}
 */

.arrow-icons {
   z-index: 520;
   position: fixed;
   bottom: 50px;
   right: 20px;
   display: none;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   transition:
      opacity 0.3s,
      transform 0.3s,
      margin-right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.arrow-circle {
   z-index: 520;
   width: 40px;
   height: 40px;
   background: #0000ff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.arrow {
   z-index: 520;
   width: 16px;
   height: 16px;
   border-top: 5px solid #ffffff;
   border-right: 3px solid #ffffff;
   display: block;
}

.arrow.up {
   z-index: 520;
   transform: rotate(-45deg);
   margin-top: 8px;
}

.arrow.down {
   z-index: 520;
   transform: rotate(135deg);
   margin-bottom: 8px;
}